<template>
  <div class="am-content">
    <div class="amc-toolbar">
      <el-date-picker
        v-model="pickerTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        align="right"
        @change="datePickerChanage">
      </el-date-picker>
      <!--<el-input class="m-input-width" style="margin-left:10px;" v-model="query.name" clearable placeholder="输入姓名"/>-->
      <el-button type="success" icon="el-icon-search" style="margin-left:10px;" @click="toQuery">搜索</el-button>
      <el-button type="warning" icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
      <el-button type="success" icon="el-icon-refresh" @click="refreshQuery">刷新</el-button>
    </div>
    <el-table border stripe :data="tableData" :header-cell-style="tableHeaderCellStyle">
      <!--
      <el-table-column label="人员信息">
          <template slot-scope="scope">
              {{scope.row.topicTypeId | topicTypeFilter}}
              <template v-for="(item, index) in scope.row.persons">
                  <el-table-column prop="name" label="姓名" align="center"></el-table-column>
              </template>
          </template>
      </el-table-column>
      -->
      <el-table-column prop="address" label="事故地点" align="center"/>
      <el-table-column prop="accidentStatus" label="事故状态" align="center">
        <template slot-scope="scope">
          <div :class="scope.row.accidentStatus === '已处理' ? 'yellow':'blue'">{{ scope.row.accidentStatus }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="事故时间" align="center" width="240" />
      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showDetail(scope.$index, scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="handlePDFPreview(scope.$index, scope.row)">审核</el-button>
          <!--<el-button type="text" size="small" @click="showLetter(scope.$index, scope.row)">协商协议书</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="curPage" :page-size="limit" layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>

    <el-dialog width="70%" :visible.sync="dialogVisiblePdf" title="事故责任认定书">
      <div class="layout-rend" style="margin: 0px 0px 16px 0px">
        <!--
        <el-select v-model="" placeholder="请选择类型" clearable>
            <el-option label="视频报警" value="0"></el-option>
            <el-option label="事故快处" value="2"></el-option>
            <el-option label="警用视频" value="3"></el-option>
            <el-option label="网络诈骗" value="4"></el-option>
        </el-select>
        -->
        <el-button type="primary" v-on:click="dealPdfFileTap">通过</el-button>
      </div>
      <iframe :src="pdfPreviewUrl | fileFilter" width="100%" height="100%" frameborder="1" style="height: 540px;" />
    </el-dialog>
  </div>
</template>

<script>

import CommonStyle from "@/util/CommonStyle";
import pagination from "@/mixins/pagination";
import ElDatePicker from "@/mixins/ElDatePicker";
import CommonFilters from "@/mixins/CommonFilters";
import HttpConnection from "@/util/HttpConnection";

export default {
  name: "AuditRecord",
  components: {},
  mixins: [pagination, ElDatePicker, CommonFilters],
  data() {
    return {
      tableHeaderCellStyle: CommonStyle.tableHeaderCellStyle,
      queryUrl: "/api-bureau/minorAccident/manager/toAudit",
      pdfPreviewUrl: "",
      dialogVisiblePdf: false,
      serialNumber: "",
    };
  },
  computed: {},
  mounted() {
    let that = this;
    that.queryData();
  },
  methods: {
// 查看详情
    showDetail(index, row) {
      this.$router.push({
        path: "AccidentDetail",
        query: {
          bizId: row.bizId
        }
      });
    },
    // 查看协商协议书
    showLetter(index, row) {
      this.$router.push({
        path: "LetterLiabily",
        query: {
          serialNumber: row.bizId
        }
      });
    },
    handlePDFPreview(index, row){
      this.dialogVisiblePdf = true;
      this.pdfPreviewUrl = row.duty;
      this.serialNumber = row.bizId;
    },
    dealPdfFileTap(){
      let that = this;
      HttpConnection.post("/api-bureau/minorAccident/manager/audit", {
        bizId: that.serialNumber,
        duty: that.pdfPreviewUrl
      }).then(function(response){
        that.pdfPreviewUrl = response.data.duty;
        that.queryData();
      });
    },
    resetQuery(){
      let _userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.curPage = 1;
      this.query = {
        userId: _userInfo.id
      };
      this.queryData();
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../styles/police-common";
.yellow{
  color: #F3B407;
}
.blue{
  color: #22DFD1;
}
</style>
